<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Yeffect-test-case</title>
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
    </head>
    <link rel="stylesheet" type="text/css" href="../../css/reset.css">
    <script src="../../script/libs/jquery-1.9.1.min.js"></script>
    <script>
        var res = ['marqueeEffect'];
        var html = [];
        var timestamp = Date.parse(new Date());
        for(s in res){
            html.push('<script type="text/javascript" src="../../script/componets/'+res[s]+'.js?v='+timestamp+'"><\/script>');
        }
        document.write(html.join(''));
    </script>
    <style>
    .marq {
        position: relative;
        width: 300px;
        height: 30px;
        overflow: hidden;
        background: #fff;
        border: 1px solid #eee;
        margin:240px;
    }

    .marq ul {
        position: absolute;
        height: 30px;
        top:0;
    }

    .marq ul li {
        float: left;
        height: 30px;
        line-height: 30px;
    }
    </style>
    <body>
    <div class="marq">
    　　<ul>
    　　　　<li>岁月如冰河，</li>
    　　　　<li>热望如鲸歌。</li>
    　　　　<li>那是柔红之下的烈火。</li>
    　　　　<li>那是醉后的他乡。</li>
    　　</ul>
    </div>
    <script type="text/javascript">
        /*
        布局要求：
        1. 第一个参数所指定元素的父容器 需要具有 定位、宽高、超出隐藏 等属性 例如: .marq { position:relative; width:300px; height:30px; overflow:hidden; }
        2. 第一个参数所指定的元素要具有 定位、高度 属性 例如：.marq ul { position:absolute; height:30px; }
        2. 第二个参数所指定的元素要具有 左浮动 属性 例如：.marq ul li { float:left; }
         */
        $(function(){
           Yeffect.marqueeEffect(".marq ul",".marq ul li");
        })
    </script>
    </body>
</html>
